﻿@model IEnumerable<EquipManagement.Models.Equipment>

@{
    ViewBag.Title = "设备管理";
}

<h2>设备列表</h2>

<p>
    @Html.ActionLink("新设备", "Create")
</p>
<table class="table  table-striped">
    <tr>

        <th>
            @Html.DisplayNameFor(model => model.Name)
        </th>
        <th>
            @Html.DisplayNameFor(model => model.Type.Name)
        </th>
        <th>
            @Html.DisplayNameFor(model => model.PurchaseDate)
        </th>
        <th>
            @Html.DisplayNameFor(model => model.Image)
        </th>
        <th>
            @Html.DisplayNameFor(model=>model.Status)
        </th>
        <th></th>
    </tr>

    @foreach (var item in Model)
    {
        <tr>

            <td>
                @Html.DisplayFor(modelItem => item.Name)
            </td>
            <td>
                @Html.DisplayFor(modelItem => item.Type.Name)
            </td>
            <td>
                @Html.DisplayFor(modelItem => item.PurchaseDate)
            </td>
            <td>        
                @if (item.Image != null) { 
                    <a  href="javascript:void(0);" id="Image@(item.Id)" data-id="@item.Id" data-name="@item.Name"  data-toggle="modal" data-target="#myModal">查看</a>
                }                                        
            </td>
            <td>
                @Html.DisplayFor(modelItem => item.Status)
            </td>
            <td>
                @Html.ActionLink("编辑", "Edit", new { id = item.Id }) |
                @Html.ActionLink("详情", "Details", new { id = item.Id }) |
                @Html.ActionLink("删除", "Delete", new { id = item.Id })
            </td>
        </tr>
    }

</table>
<!-- Modal -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                <h4 class="modal-title" id="myModalLabel"></h4>
            </div>
            <div class="modal-body">
                <img id="EquipmentImage" src="" style="width:100%;"/>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
            </div>
        </div>
    </div>
</div>
@section Scripts {   
    <script type="text/javascript">
        $('a[id^="Image"]').click(function (e) {
            $('#myModalLabel').text(this.getAttribute('data-name'));
            $("#EquipmentImage").attr('src','@(Url.Action("GetImage"))/' + this.getAttribute('data-id'));
        })

    </script>
}
